<template>
  <div>
    <div class="container">

      <h3>缺陷基本信息</h3>
      <div class="info-section">
        <p>状态: {{ list.state }}</p>
        <p>设备编码: {{ list.equipmentId }}</p>
        <p>设备名称: {{ list.equipmentName }}</p>
        <p>检修分工: {{ list.overhaulJob }}</p>
        <p>缺陷等级: {{ list.level }}</p>
        <p>缺陷环节: {{ list.defectLink }}</p>
        <p>缺陷内容: {{ list.content }}</p>
        <p>专业: {{ list.equipmentMajor }}</p>
        <p>操作分工: {{ list.operateJob }}</p>
        <p>发现人: {{ list.initiatorUserId }}</p>
        <p>点检分工: {{ list.spotCheckJob }}</p>
        <p>缺陷现象: {{ list.phenomenon }}</p>
        <p>发现时间: {{ list.foundTime }}</p>
      </div>

      <h3>缺陷策划信息</h3>
      <div class="info-section">
        <p>计划开始时间: {{ list.scheduledBeginTime }}</p>
        <p>计划结束时间: {{ list.scheduledEndTime }}</p>
        <p>实施方式: {{ list.todoMethod }}</p>
        <p>消缺部门: {{ list.eliminationDep }}</p>
        <p>初步缺陷分析: {{ list.preAnalysis }}</p>
        <p>处理方案: {{ list.plan }}</p>
      </div>

      <h3>缺陷实施信息</h3>
      <div class="info-section">
        <p>实际开始时间: {{ list.actualBeginTime }}</p>
        <p>实际结束时间: {{ list.actualEndTime }}</p>
        <p>消缺负责人: {{ list.eliminationStaffUserId }}</p>
        <p>消缺情况说明: {{ list.eliminationInfo }}</p>
        <p>消缺原因分析: {{ list.eliminationReason }}</p>
        <p>检修交代: {{ list.eliminationRemark }}</p>
      </div>
    </div>

    <div class="button-section" style="display: flex; justify-content: center; align-items: center;">
      <el-button type="success" @click="handleSubmit">录入</el-button>
    </div>
    <div>
      <div v-if="dialogVisible" class="dialog">
        <section class="dialog-content">
          <h3>缺陷基本信息</h3>
          <div class="info-section">
            <!-- 第一列 -->
            <div class="column">
              <div class="input-item">
                <label>状态:</label>
                <input v-model="formData.status" type="text" />
              </div>
              <div class="input-item">
                <label>设备编码:</label>
                <input v-model="formData.equipmentId" type="text" />
              </div>
              <div class="input-item">
                <label>设备名称:</label>
                <input v-model="formData.equipmentName" type="text" />
              </div>
              <div class="input-item">
                <label>检修分工:</label>
                <input v-model="formData.overhaulJob" type="text" />
              </div>
              <div class="input-item">
                <label>缺陷等级:</label>
                <input v-model="formData.level" type="text" />
              </div>
            </div>

            <!-- 第二列 -->
            <div class="column">
              <div class="input-item">
                <label>缺陷环节:</label>
                <input v-model="formData.defectLink" type="text" />
              </div>
              <div class="input-item">
                <label>缺陷内容:</label>
                <input v-model="formData.content" type="text" />
              </div>
              <div class="input-item">
                <label>专业:</label>
                <input v-model="formData.equipmentMajor" type="text" />
              </div>
              <div class="input-item">
                <label>操作分工:</label>
                <input v-model="formData.operateJob" type="text" />
              </div>
              <div class="input-item">
                <label>发现人:</label>
                <input v-model="formData.initiatorUserId" type="text" />
              </div>
            </div>

            <!-- 第三列 -->
            <div class="column">
              <div class="input-item">
                <label>点检分工:</label>
                <input v-model="formData.spotCheckJob" type="text" />
              </div>
              <div class="input-item">
                <label>缺陷现象:</label>
                <input v-model="formData.phenomenon" type="text" />
              </div>
              <div class="input-item">
                <label>发现时间:</label>
                <input v-model="formData.foundTime" type="text" />
              </div>
            </div>
          </div>

          <h3>缺陷策划信息</h3>
          <div class="info-section">
            <div class="column">
              <div class="input-item">
                <label>计划开始时间:</label>
                <input v-model="formData.scheduledBeginTime" type="text" />
              </div>
              <div class="input-item">
                <label>计划结束时间:</label>
                <input v-model="formData.scheduledEndTime" type="text" />
              </div>
              <div class="input-item">
                <label>实施方式:</label>
                <input v-model="formData.todoMethod" type="text" />
              </div>
            </div>

            <div class="column">
              <div class="input-item">
                <label>消缺部门:</label>
                <input v-model="formData.eliminationDep" type="text" />
              </div>
              <div class="input-item">
                <label>初步缺陷分析:</label>
                <input v-model="formData.preAnalysis" type="text" />
              </div>
              <div class="input-item">
                <label>处理方案:</label>
                <input v-model="formData.plan" type="text" />
              </div>
            </div>
          </div>

          <h3>缺陷实施信息</h3>
          <div class="info-section">
            <div class="column">
              <div class="input-item">
                <label>实际开始时间:</label>
                <input v-model="formData.actualBeginTime" type="text" />
              </div>
              <div class="input-item">
                <label>实际结束时间:</label>
                <input v-model="formData.actualEndTime" type="text" />
              </div>
              <div class="column">
                <div class="input-item">
                  <label>消缺负责人:</label>
                  <input v-model="formData.eliminationStaffUserId" type="text" />
                </div>
                <div class="input-item">
                  <label>消缺情况说明:</label>
                  <input v-model="formData.eliminationInfo" type="text" />
                </div>
                <div class="input-item">
                  <label>消缺原因分析:</label>
                  <input v-model="formData.eliminationReason" type="text" />
                </div>
                <div class="input-item">
                  <label>检修交代:</label>
                  <input v-model="formData.eliminationRemark" type="text" />
                </div>
              </div>
            </div>


          </div>
        </section>
        <div class="btn-group">
          <button @click="handleDialogSubmit">提交</button>
          <button @click="handleDialogCancel" class="cancel-btn">取消</button>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
import axios from "axios";

export default {

  name: 'DefectDetail',
  props: {
    id: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      formData: {
        status: "",
        equipmentId: "",
        equipmentName: "",
        overhaulJob: "",
        level: "",
        defectLink: "",
        content: "",
        equipmentMajor: "",
        operateJob: "",
        initiatorUserId: "",
        spotCheckJob: "",
        phenomenon: "",
        foundTime: "",
        scheduledBeginTime: "",
        scheduledEndTime: "",
        todoMethod: "",
        eliminationDep: "",
        preAnalysis: "",
        plan: "",
        actualBeginTime: "",
        actualEndTime: "",
        eliminationStaffUserId: "",
        eliminationInfo: "",
        eliminationReason: "",
        eliminationRemark: "",
      },
      list: [],
      dialogVisible: false, // 控制对话框的显示和隐藏
    };
  },
  created() {
    const id = this.$route.params.id;
    this.getData(id);
  },
  methods: {
    handleSubmit() {
      this.dialogVisible = true; // 打开对话框
    },
    handleProcess() {
      // 改变状态的代码
      axios.post('yourendpointurl', {
        id: this.id,
        status: 'newStatus' // 指定新的状态
      }).then((response) => {
        this.list.status = response.data.status; // 修改当前状态
      });
    },
    getData(id) {
      axios.get(`http://localhost:9527/defect/getDefectById/${id}`).then(res => {
        this.list = res.data.data;
      })
        .catch(err => console.log(err));
    },
    handleDialogSubmit() {
      // 提交对话框中的内容
      axios.post('http://localhost:9527/defect/add', this.formData).then((response) => {
        if (response.status === 200) {
          this.$message({
            type: 'success',
            message: '添加成功!'
          });
          this.addDialogVisible = false;  // 成功后关闭对话框
        }
      }).catch(error => {
        this.$message({
          type: 'error',
          message: '添加失败!'
        });
        console.error("添加失败", error);
      });
    },
    handleDialogCancel() {
      this.dialogVisible = false; // 关闭对话框，不做任何额外操作
    }
  }
}
</script>
  
<style scoped>
.container {
  width: 80%;
  margin: auto;
}

.info-section {
  padding: 10px;
  border: 1px solid #dedede;
  margin-bottom: 10px;
}

.button-section {
  margin-top: 20px;
}

.dialog {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  overflow: hidden;
  /* Hide content that overflows the dialog */
  max-height: 80vh;
  /* Set a maximum height for the dialog */
}

.dialog-content {
  overflow-y: auto;
  /* Enable vertical scrollbar when content overflows */
  max-height: 60vh;
  /* Set a maximum height for the content area */
}

section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

h3 {
  margin-top: 20px;
  color: darkblue;
  /* changed the color of properties to dark blue */
}

.info-section {
  display: flex;
  gap: 20px;
}

.column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.input-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.input-item label {
  color: darkblue;
  /* changed the color of label to dark blue */
}

.input-item input {
  flex: 1;
  padding: 10px;
  margin-left: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

.btn-group {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

button {
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  opacity: 0.8;
}

.cancel-btn {
  background-color: #f44336;
  color: white;
}

.info-section {
  padding: 10px;
  border: 1px solid #dedede;
  margin-bottom: 10px;
  background-color: lightblue;
  /* change the color of input and data parts to light blue */
}

.column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.input-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.input-item input {
  flex: 1;
  padding: 10px;
  margin-left: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

.btn-group {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

button {
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  opacity: 0.8;
}

.cancel-btn {
  background-color: #f44336;
  color: white;
}
</style>